<script>
const changeTime = [
  {
    time: "day",
    type: "",
    remark: "今日",
  },
  {
    time: "week",
    type: "primary",
    remark: "本周",
  },
  {
    time: "month",
    type: "success",
    remark: "本月",
  },
];
export default changeTime;
</script>
<script setup>
import {
  onMounted,
  ref,
  inject,
  nextTick,
  defineProps,
  computed,
  watch,
} from "vue";
import { color, chartCommonConfig } from "../config.js";
import { dataUserWeekCountService } from "@/api";
import { ElMessage } from "element-plus";
import { formatTime } from "@/utils/format.js";

const props = defineProps(["time"]);
const timeMark = computed(() => props.time);
// 使用ref声明两个数组，用于存储键和值
let params = ref({
  begin: "",
  end: "",
});
let loading = ref(false);
let keysArray = ref([]);
let valuesArray = ref([]);
let hasError = ref(false); // 新增状态变量，用于标记是否有错误发生

/**
 * 异步获取用户周数据统计，并处理这些数据
 */
const getUserWeekCount = async () => {
  let ago = ref(7);
  // 获得当前的年-月-日
  console.log(timeMark.value);

  let nowTime = formatTime(new Date(Date.now()), "YYYY-MM-DD");
  if (timeMark.value == "day") ago.value = 1;
  if (timeMark.value == "month") ago.value = 30;
  if (timeMark.value == "week") ago.value = 6;
  console.log("month");
  console.log(timeMark === "month");
  try {
    loading.value = true;
    let daysAgo = formatTime(
      new Date(Date.now() - ago.value * 24 * 60 * 60 * 1000),
      "YYYY-MM-DD"
    );
    params.value.begin = daysAgo;
    params.value.end = nowTime;

    // 异步获取用户周数据
    let { data } = await dataUserWeekCountService(params.value);
    console.log(data);
    keysArray.value = data.dateList.split(",");
    valuesArray.value = data.newUserList.split(",");

    // 暂时模拟数据
    valuesArray.value = valuesArray.value.map((item) => {
      let random = Math.floor(Math.random() * 100);
      item = +item + random;
      return item;
    });
    initEcharts();
  } catch (error) {
    hasError.value = true; // 请求失败时，标记错误
    ElMessage.error("请求失败，请稍后再试");
    console.log(error);
  } finally {
    loading.value = false;
  }
};

// 页面加载时调用
getUserWeekCount();

// 通过inject引入echarts依赖
const echarts = inject("echarts");

// 通过ref获取用于渲染echarts的div元素
const info = ref();

// 组件挂载时，初始化并渲染echarts图表
onMounted(() => {
  // initEcharts();
});

const initEcharts = () => {
  // 渲染echarts的父元素
  var infoEl = info.value;

  // 初始化echarts实例，并指定渲染的div和主题
  var echartsData = echarts.init(infoEl, "light");

  // 使用共用配置并扩展
  var option = {
    ...chartCommonConfig, // 扩展共用配置
    xAxis: {
      ...chartCommonConfig.xAxis,
      data: keysArray.value, // 覆盖或添加特定的data
    },
    series: [
      {
        ...chartCommonConfig.series,
        data: valuesArray.value, // 覆盖或添加特定的data
        // 如果有其他特定配置，可以在这里继续添加或覆盖
        lineStyle: {
          color: "#ff8c00", // 深橙色
        },
        itemStyle: {
          ...chartCommonConfig.series.itemStyle,
          color: "#ff8c00",
        },
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0.5,
                color: `rgba(255, 165, 0, ${0.3})`, // 橙色
              },
              {
                offset: 1,
                color: `rgba(255, 0, 0, ${0.3})`, // 深红色
              },
            ],
            globalCoord: false,
          },
        },
      },
    ],
  };
  // 渲染图表
  echartsData.setOption(option);
  window.addEventListener("resize", () => {
    echartsData.resize();
  });
};

// 重新获取
const reGet = () => {
  getUserWeekCount();
};

watch(timeMark, async (new1) => {
  await getUserWeekCount();
});
</script>
<template>
  <div
    ref="info"
    style="width: 100%; height: 230px"
    v-if="!hasError"
    v-loading="loading"
    class="info"
  ></div>
  <el-empty v-else style="width: 100%; height: 230px">
    <el-button type="primary" @click="reGet" v-loading="loading"
      >重新获取</el-button
    >
  </el-empty>
</template>
<style scoped lang="scss"></style>
